<template>
    <div class="container">
        <div class="document_top">
            <span>{{ menuList[tabIndex].title }}</span>
            <div class="directory" @click="handleDrawerVisible">
                <span>目录</span>
            </div>
        </div>
        <div id="preview"></div>
        <el-drawer
          title="目录"
          :visible.sync="drawer"
          direction="rtl"
          size="70%"
          >
          <div class="logs_box">
            <div class="list">
            <template v-for="(item, index) in menuList">
                <div
                class="list-item"
                :class="index == tabIndex ? 'active' : ''"
                :key="index"
                @click="handleTab(item, index)"
                >
                <span class="file_name">{{ item.title }}</span>
                <i
                    class="el-icon-arrow-down"
                    v-if="index == tabIndex && item.isOpen"
                ></i>
                <i class="el-icon-arrow-right" v-else></i>
                </div>
                <div :id="item.id" v-show="item.isOpen"></div>
            </template>
            </div>
            </div>
        </el-drawer>
    </div>
  </template>
  <script>
  import Vditor from "vditor";
  import "vditor/dist/index.css";
  
  
  export default {
    name: "web_content",
    components: {},
    data() {
      return {
        toc: [],
        menuList: [
          {
            title: "快速入门",
            isOpen: false,
            id: "introduction",
            url: "/assets/group1/md/快速入门.md",
          },
          {
            title: "使用文档",
            isOpen: false,
            id: "document",
            url: "/assets/group1/md/documentation.md",
          },
          {
            title: "用户手册",
            isOpen: false,
            id: "manual",
            url: "/assets/group1/md/用户手册.md",
          },
        ],
        tabIndex: 0,
        activeId: "introduction",
        drawer:false,
      };
    },
    props: {},
    mounted() {
        console.log(this.$route.query.name)
        this.menuList.forEach((item,index)=>{
            if(item.title == this.$route.query.name){
                this.getMdData(item.url);
                this.tabIndex = index
                this.activeId = item.id
            }
        })
    },
    destroyed() {},
    methods: {
      initOutline() {
        const headingElements = [];
        Array.from(document.getElementById("preview").children).forEach(
          (item) => {
            if (
              item.tagName.length === 2 &&
              item.tagName !== "HR" &&
              item.tagName.indexOf("H") === 0
            ) {
              headingElements.push(item);
            }
            this.toc = [];
            headingElements.forEach((item) => {
              this.toc.push({
                id: item.id,
                offsetTop: item.offsetTop,
              });
            });
          }
        );
        //初始化事件
        console.log(document.querySelectorAll(`#${this.activeId}>ul li`));
        document.querySelectorAll(`#${this.activeId}>ul li`).forEach((item) => {
          item.removeEventListener("click", this.LIClick);
          item.addEventListener("click", this.LIClick);
        });
  
        window.addEventListener(
          "scroll",
          () => {
            const scrollTop = window.scrollY;
            console.log(scrollTop)
            const currentElement = document.querySelector(
              ".vditor-outline__item--current"
            );
            for (let i = 0, iMax = this.toc.length; i < iMax; i++) {
              if (scrollTop < this.toc[i].offsetTop - 30) {
                if (currentElement) {
                  currentElement.classList.remove(
                    "vditor-outline__item--current"
                  );
                }
                let index = i > 0 ? i - 1 : 0;
                document
                  .querySelector(
                    'span[data-target-id="' + this.toc[index].id + '"]'
                  )
                  .classList.add("vditor-outline__item--current");
                break;
              }
            }
          },
          true
        );
      },
  
      getMdData(url) {
        var that = this;
        /// get 请求拿到返回流
        fetch(url)
          .then((response) => response.text())
          .then((data) => {
            Vditor.preview(document.getElementById("preview"), data, {
              speech: {
                enable: true,
              },
              anchor: 1,
              after() {
                const outlineElement = document.getElementById(that.activeId);
                console.log(outlineElement)
                Vditor.outlineRender(
                  document.getElementById("preview"),
                  outlineElement
                );
                if (outlineElement.innerText.trim() !== "") {
                  outlineElement.style.display = "block";
                  that.initOutline();
                }
              },
            });
          });
      },
  
      LIClick(event) {
        var previewdom = document.getElementById("preview");
        var name = event.target.getAttribute("data-target-id");
        var activeDom = event.target;
        if (!name) {
          activeDom = event.target.parentElement;
        }
        if (!name) {
          name = event.target.parentElement.getAttribute("data-target-id");
        }
        var finditem = this.toc.find((x) => {
          if (x.id == name) {
            return true;
          }
          return false;
        });
        document
          .querySelectorAll(`#${this.activeId}>ul li span`)
          .forEach((item) => {
            item.classList.remove("active_li");
          });
        activeDom.classList.add("active_li");
        this.drawer = false
      },

      handleDrawerVisible(){
        this.drawer = true
        this.menuList[this.tabIndex].isOpen = true
        console.log(this.menuList)
        this.getMdData(this.menuList[this.tabIndex].url);
      },
  
      handleTab(row, index) {
        row.isOpen = !row.isOpen;
        this.activeId = row.id
        this.tabIndex = index;
        console.log(row)
        this.menuList.forEach((k, i) => {
          if (index != i) {
            k.isOpen = false;
          }
        });
        if (row.isOpen) {
          this.getMdData(row.url);
          
        }
      },
    },
  };
  </script>
  <style>
  .active_li {
    color: #fff !important;
    background-color: rgba(102, 8, 116, .5) !important;;
  }
</style>
<style lang="scss" scoped>
  
  @media screen and (max-width: 750px) {
      .container {
        padding-top: 60px;
        background: #f1f1f1;
        height: calc(100% - 70px);
        overflow-y: auto;
        .content {
          display: flex;
          background-color: #fff;
          height: 100%;
        }
      }
        .active {
          background: rgba(253, 240, 255, 1);
          color: rgba(51, 51, 51, 1);
        }
         .active::before{
            content: '';
            display: inline-block;
            height: 70%;
            width: 2px;
            background: rgba(102, 8, 116, 1)
          }
        
          .file_name{
            padding-left: 16px;
          }

          .document_top{
            position: fixed;
            top: 60px;
            left: 0;
            height: 45px;
            width:92%;
            padding:  0 16px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 16px;
            background-color: #fff;
          }
        
        .directory {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 40px;
            height: 24px;
            opacity: 1;
            border-radius: 4px;
            background: rgba(255, 255, 255, 1);
            border: 1px solid rgba(102, 8, 116, 1);
            color:rgba(102, 8, 116, 1);
        }
        
        #preview {
          margin-top:60px;
        }
        
        .vditor-outline {
          font-size: 15px;
        }
        
        .list{
          height: 100%;
          overflow-y: auto;
        }
        
        .list-item {
          position: relative;
          padding-right: 16px;
          display: flex;
          align-items: center;
          font-size: 16px;
          height: 50px;
          cursor: pointer;
          i{
            position: absolute;
            right: 16px;
          }
        }
        
        .left {

        }
        .right {
          margin-bottom: 100px;
          overflow-y: auto;
        }
  }
  
  </style>
  